<template>
  <div id="app" style="background-color:#fff;" class="container">
    <div class="flex" >
      <div @click.stop="backHome" >
        <router-link tag="h1" to="/home" style="cursor: pointer">图灵丛书</router-link>
      </div>

      <el-col :span="5">
        <el-input
          placeholder="请输入内容"
          v-model="input"
          @keyup.enter.native="showSearch"
          :style="{'display':+$route.path.indexOf('detail')>=0? 'none':'block'}"
        ></el-input>
        
        <!-- 
          显隐也可以用v-show="$route.path.indexOf('/detail/') < 0"> 
        -->
      </el-col>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
// import { tools } from "@/components/tools.js";
// import throttle from "@/components/hanshujieliu.js";
import Home from "@/views/Home";
export default {
  components: {
    Home
  },
  data() {
    return {
      input: "",
      time: null
    };
  },
  methods: {
    //enter搜索
    showSearch() {
      if (!this.input) {
        return;
      }

      this.$store.commit("testEvent", this.input);
      this.input = "";
    },
    /*
     发送空字串 让home页重新刷新遍历
     (在搜索后，home页的数据已经刷新好了，所以会导致点击返回主页仍旧是搜索后的页面)
     之所以没有利用this.$router.go(-1)返回，是因为搜索结果页并没有与home页分离出来，所以在返回时会回退到详情页..
    */
    backHome() {
      this.$store.commit("testEvent", "");
    }
  }
};
</script>

<style>
body {
  background-color: rgba(246, 249, 253, 0.911);
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-input {
  top: 5px;
}
</style>
